<template>
  <header class="mine-header">
    <div class="mine-header-main" @click="mineElm">
	  <img-format v-if="userInfo.avatar" :src="userInfo.avatar" class="avator" />
      <img v-else :src="headerImg" class="avator" />
      <div class="content">
        <p class="title">{{!isLogin ? '登录/注册' : userInfo.username}}</p>
        <p style="margin: 0;"><span class="iconfont icon-shouji"></span><span class="info">{{!isLogin ? '登陆后享受更多特权' : userInfo.mobile | telEncryption}}</span></p>
      </div>
    </div>
    <span class="iconfont icon-jiantou-elm jiantou" @click="mineElm"></span>
  </header>
</template>

<script>
import { getUserInfo } from '@/api/elm-data'
import { headerImg } from '_c/mine/mine-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'mine-header',
  data() {
    return {
      isLogin: false,
      headerImg,
      userInfo: {
      }
    }
  },
  components: {
	ImgFormat
  },
  async created() {
    if(this.$store.state.token) {
      this.isLogin = true
      const userID = window.sessionStorage.getItem('USER_ID')
      const { data } = await getUserInfo(userID)
      console.log(data,0)
      this.userInfo = data
      window.sessionStorage.setItem('userInfo', JSON.stringify(data))
    }else {
      this.isLogin = false
    }
  },
  methods: {
    mineElm() {
      if(window.sessionStorage.getItem('token') === 'ok') {
        this.$router.push('/personalinfo')
      }else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .mine-header {
    height: 220px;
    width: 100%;
    background: linear-gradient(to right, #00a9ff, #0086ff);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mine-header-main {
    margin-left: 15px;
    display: flex;
    align-items: center;
    flex: 12;
    color: #fff;
  }
  .avator {
    height: 150px;
    width: 150px;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
  }
  .content {
    margin-left: 15px;
    height: 200px;
  }
  .title {
    font-size: 32px;
    font-weight: 600;
  }
  .title-bottom {
    margin: 0;
  }
  .info {
    font-size: 28px;
    vertical-align: middle;
  }
  .phone-icon {
    height: 40px;
    width: 40px;
    margin-left: -10px;
    vertical-align: middle;
  }
  .jiantou {
    flex: 1;
    font-size: 56px;
    color: #fff;
  }
  .icon-shouji {
    font-size: 32px;
    vertical-align: middle;
  }
</style>
